page{
	height: 100%;
}
.main{
	height: 100%;
	background-image: url('../../static/img/headimg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	.nav{
		position: absolute;
		width: 100%;
		height: 80rpx;
		
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
	.scroll-view{
		padding-top: 80rpx;
		overflow: hidden;
		// height: 100%;
		
		.loading{
			padding: 20rpx 0;
		}
		.chat{
			.chat-time{
				text-align: center;
				padding: 20rpx 0;
			}
			.chat-list{
				
			}
			.chat-img{
				width: 50rpx;
				height: 50rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.chat-msg{
				max-width: 60%;
				height: 100%;
				margin: 0 20rpx;
				line-height: 40rpx;
				background-color: #fff;
				border-radius: 15rpx;
				font-size: 24rpx;
				padding: 20rpx;
			}
			.chat-image{
				margin: 0 20rpx;
				max-width: 50%;
				image{
					max-width: 100%;
				}
			}
		}
	}

	.menu{
		width: 100%;
		height: 100%;
		background-color: gainsboro;
		position: absolute;
		bottom: 0;
		.menu-send{
			background-color: skyblue;
			padding: 10rpx 20rpx;
			color: #fff;
			border-radius: 40rpx;
			margin-left: 10rpx;
		}
	}

	// 弹窗
	.pop{
		height: 570rpx;
		overflow: scroll;
		.emoji{
			width: 10%;
			// height: 80rpx;
			margin: 20rpx 0;
			text-align: center;
			.emoji-text{
				text-align: center;
				font-size: 46rpx;
			}
		}
		.swiper{
			width: 100%;
			height: 100%;
			.swiper-item{
				
			}
		}
		.sound{
			width: 100%;
			height: 100%;
			text-align: center;
			.sound-icon{
				width: 300rpx;
				height: 300rpx;
				line-height: 300rpx;
				border-radius: 50%;
				background-color: skyblue;
			}
		}
	}


  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    // padding-bottom: 0;  
    // padding-bottom: constant(safe-area-inset-bottom);  
    // padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2rpx 10rpx 0 rgba(153, 153, 153, 0.26);
    border-radius: 20rpx 20rpx 0 0;
    .menu-box{
      height: 98rpx;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      .btn-box{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btn-send{
        width: 80rpx;
        height: 50rpx;
        background-color: #FBD220;
        border-radius: 5rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #3D3D3D;
        margin-left: 20rpx;
      }
      .input-box{
        flex: 1;
        margin-right: 24rpx;
        .content {
          box-sizing: border-box;
          background-color: #eee;
          height: 80rpx;
          padding: 0 20rpx;
          border-radius: 10rpx;
          font-size: 28rpx;
        }
        .voice_title {
          text-align: center;
          background-color: #eee;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
  
  .voice_an{
    width: 300rpx;
    height: 300rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-55%);
    background-color: rgba(41,41,41,0.7);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 10rpx;
    .text{
      padding-top: 30rpx;
    }
    @keyframes runVoice{
      0%{
        height: 10%;
      }
      20%{
        height: 50%;
      }
      50%{
        height: 100%;
      }
      80%{
        height: 50%;
      }
      100%{
        height: 0%;
      }
    }	
    .wave{
      width:6rpx;
      height: 100%;
      margin-left: 10rpx;
      border-radius: 50rpx;
      background-color: #999;
      vertical-align: middle;
      display: inline-block;
    }
    .voice_an_icon{
      width: 200rpx;
      height: 100rpx;
      line-height: 50rpx;
      margin: 50rpx 0;
    }
    .voice_an_icon #one{
      animation:runVoice 0.6s infinite 0.1s;
    }
    .voice_an_icon #two{
      animation:runVoice 0.6s infinite 0.3s;
    }
    .voice_an_icon #three{
      animation:runVoice 0.6s infinite 0.6s;
    }
    .voice_an_icon #four{
      animation:runVoice 0.6s infinite 0.1s;
    }
    .voice_an_icon #five{
      animation:runVoice 0.6s infinite 0.3s;
    }
    .voice_an_icon #six{
      animation:runVoice 0.6s infinite 0.6s;
    }
    .voice_an_icon #seven{
      animation:runVoice 0.6s infinite 0.1s;
    }
  }
  .drawer-box{
    .emoji-swiper{
    	height: 0;
      // transition: all .1s linear;
      overflow: hidden;
      opacity: 0;
    	swiper-item{
    		display: flex;
    		align-content: flex-start;
    		flex-wrap: wrap;
    		view{
    			width: 12vw;
    			height: 12vw;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			image{
    				width: 6vw;
    				height: 6vw;
    			}
    		}
    	}
      &.show{
        height: 40vw;
        opacity: 1;
      }
    }
    .fun-box{
      height: 0;
      // transition: all .1s linear;
      overflow: hidden;
      opacity: 0;
      .icon{
        width: 100rpx;
        height: 100rpx;
        background-color: #F6F6F6;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
      }
      .grid-text{
        font-size: 26rpx;
        color: #666;
        margin-top: 12rpx;
      }
      &.show{
        height: 440rpx;
        opacity: 1;
      }
    }
  }}
.icon{
	margin: 20rpx 20rpx 0 20rpx;
}
.video{
	position: absolute;
	left: 0;
	top: 0;
	width: 30%;
	height: 30%;
	z-index: 1;
}
.livePusher{
	position: absolute;
	left: 0;
	top: 0;
	width: 30%;
	height: 30%;
	z-index: 3;
}
